<template>
  <div class="container">
    <div class="custom-tree-container-left">
      <el-tree
        :data="dataTree"
        :props="defaultProps"
        node-key="id"
        draggable
        default-expand-all
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        show-checkbox
        @check-change="handleCheckChange"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => append(data)">追加</el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
// 数据转换一下（平面数据处理）
import { treeDataTranslate } from '@/utils'
export default {
  data () {
    return {
      dataTree: null,
      dataTemp: [
        {
          'id': 1,
          'parentId': 0,
          'parentName': null,
          'label': '一班',
          'type': 0
        },
        {
          'id': 2,
          'parentId': 0,
          'parentName': null,
          'label': '二班',
          'type': 0
        },
        {
          'id': 3,
          'parentId': 1,
          'parentName': '一班',
          'label': '同学1',
          'type': 1
        },
        {
          'id': 4,
          'parentId': 1,
          'parentName': '一班',
          'label': '同学2',
          'type': 1
        },
        {
          'id': 7,
          'parentId': 2,
          'parentName': '二班',
          'label': '同学5',
          'type': 1
        },
        {
          'id': 8,
          'parentId': 2,
          'parentName': '二班',
          'label': '同学6',
          'type': 1
        }
      ],
      dataListLoading: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  activated () {
    this.getDataTree()
  },
  methods: {
    getDataTree () {
      this.dataListLoading = true
      let temp = this.dataTemp
      this.dataTree = treeDataTranslate(temp, 'id')
      this.dataListLoading = false
      // this.service.exampleTreeEmployees().then(res => {
      //   // 数据先处理
      //   let dataTemp = treeDataTranslate(res.data, 'id')
      //   console.log('转换后的数据：', dataTemp)
      //   this.dataTree = dataTemp
      // }).then(() => {
      //   this.dataListLoading = false
      // })
    },
    // 树的支持函数

    // 节点开始拖拽时触发的事件
    handleDragStart (node, ev) {
      console.log('拖拽开始', node.label)
    },

    // 拖拽进入其他节点时触发的事件
    handleDragEnter (draggingNode, dropNode, ev) {
      console.log('正在拖拽的: ', draggingNode.label)
      console.log('进入的节点: ', dropNode.label)
    },

    // 拖拽离开某个节点时触发的事件
    handleDragLeave (draggingNode, dropNode, ev) {
      console.log('正在拖拽的: ', draggingNode.label)
      console.log('离开的节点: ', dropNode.label)
    },

    // 在拖拽节点时触发的事件（mouseover）
    handleDragOver (draggingNode, dropNode, ev) {
      console.log('正在拖拽的: ', draggingNode.label)
      console.log('经过的节点: ', dropNode.label)
    },

    // 拖拽结束时（可能未成功）触发的事件
    handleDragEnd (draggingNode, dropNode, dropType, ev) {
      console.log('正在拖拽的: ', draggingNode.label)
      console.log('到达的节点: ', dropNode.label)
      console.log('拖拽类型: ', dropType)
    },

    // 拖拽成功完成时触发的事件
    handleDrop (draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType)
      console.log('正在拖拽的: ', draggingNode.label)
      console.log('到达的节点: ', dropNode.label)
      console.log('拖拽类型: ', dropType)

      if (dropType === 'inner') {
        console.log('进入父节点', dropNode.label)
      }
      if (dropType === 'after') {
        console.log('兄弟节点后', dropNode.label)
      }

      console.log(this.dataTemp)
    },

    // 拖拽时判定目标节点能否被放置
    allowDrop (draggingNode, dropNode, type) {
      return true
    },

    // 判断节点能否被拖拽
    allowDrag (draggingNode) {
      return true
    },

    // 节点选中状态发生变化时的回调
    handleCheckChange (data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },

    append (data) {
      console.log(data)
      let id = data.length + 1
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    }

  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.container {
  width: 1000px;
}
.custom-tree-container-left {
  justify-content: space-between;
  width: 50%;
}
</style>
